<template>
  <div>
    <!-- 详情弹窗 -->
    <el-dialog
      title="查看详情"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <el-form label-width="80" :inline="true">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="投票类型">
              <el-select v-model="qo.PopularityTypeCode" clearable placeholder="请选择投票类型" size="mini" @change="getPageList()">
                <el-option v-for="(item, index) in popularityTypeList" :key="index" :label="item.value" :value="item.code">{{ item.value }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table v-loading="tableLoading" size="mini" :data="tableData" class="gl_table_noBorder mb_17" style="width: 100%">
        <el-table-column label="序号" type="index" :index="table_index" />
        <el-table-column label="投票类型">
          <template slot-scope="scope">
            <span>{{ scope.row.popularity && scope.row.popularity.popularityType ? scope.row.popularity.popularityType.name : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="giverName" label="投票人" />
        <el-table-column prop="toUserName" label="被投票人/机构" />
        <el-table-column prop="amount" label="投票金额">
          <template slot-scope="scope">
            <span style="margin-right:1px;">￥</span><span>{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="投票时间">
          <template slot-scope="scope">
            <span>{{ scope.row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="text-align: right;padding-top: 15px">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          :page-count="5"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="qo.MaxResultCount"
          :current-page="qo.Page"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { api_GET_EventsManagementPopularityGiftVotingLogs } from '@/extend/api/gameswaggerApi/app';
import { Api_GET_EventsManagementPopularityGiftVotingLogsQO } from '@/lib/form/game/swaggerForm';
export default {
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      qo: new Api_GET_EventsManagementPopularityGiftVotingLogsQO(),
      tableData: [],
      pageTotal: 0,
      tableLoading: false,
      row: {}
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    }),
    popularityTypeList() {
      let list = [];
      if (this.dict.popularityType) {
        list = JSON.parse(JSON.stringify(this.dict.popularityType)) || [];
        list.unshift({ value: '全部', code: '' });
      }
      return list;
    }
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 打开弹窗
    open(row) {
      this.row = row;
      this.dialogVisible = true;
      this.getPageList();
      console.log('dcit', this.dict);
    },
    // 关闭弹窗
    close() {
      this.$refs['form'].resetFields();
      this.dialogVisible = false;
    },
    getPageList(page) {
      console.log('data', this.rowData);
      this.qo.CompetitionId = this.row.id;
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.qo.Sorting = '';
      this.tableLoading = true;
      api_GET_EventsManagementPopularityGiftVotingLogs(this.qo).then(res => {
        this.tableLoading = false;
        this.pageTotal = res.totalCount;
        if (res.items) {
          this.tableData = res.items.map(item => {
            item.amount = item.amount / 100;
            return item;
          });
        }
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    table_index(index) {
      return (this.qo.Page - 1) * this.qo.MaxResultCount + index + 1;
    },
    // 获取静态图片
    getStaticFileUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.qo.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>
